<template>
    <TManageLayout>
        <div class="timeline-container">
            <div class="content-wrapper">
                <!-- 左侧预留空间 -->
                <div class="left-space"></div>

                <!-- 使用时间轴组件 -->
                <TimeLine 
                    :courseId="courseManageId"
                    :steps="localSteps"
                    @step-toggle="handleStepToggle"
                />

                <!-- 中间的步骤编辑区域 -->
                <div class="steps-editor">
                    <h2 class="editor-title">编辑步骤</h2>
                    <div class="steps-list">
                        <div v-for="(step, index) in localSteps" :key="index" class="step-item">
                            <div class="step-number">{{ index + 1 }}</div>
                            <input v-model="step.content" class="step-input" :placeholder="'请输入步骤' + (index + 1)" />
                            <button @click="removeStep(index)" class="delete-btn">删除</button>
                        </div>
                    </div>
                    <div class="button-group">
                        <button @click="addStep" class="action-btn add-btn">添加步骤</button>
                        <button @click="saveSteps" class="action-btn save-btn">保存</button>
                        <button 
                            v-if="isSaved" 
                            @click="startClass" 
                            class="action-btn start-btn"
                        >开始上课</button>
                    </div>
                </div>
            </div>
        </div>
    </TManageLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus';
import TimeLine from '@/components/TimeLine.vue';
import TManageLayout from '@/components/TManageLayout.vue';

const route = useRoute();
const router = useRouter();
const courseManageId = ref(route.params.courseManageId);
const localSteps = ref([
    { content: '上课', completed: false },
    { content: '签到', completed: false },
    { content: '课堂质量实时反馈', completed: false },
    { content: '发布作业', completed: false },
    { content: '上传课堂总结', completed: false },
    { content: '下课', completed: false }
]);

const isSaved = ref(false);

const addStep = () => {
    localSteps.value.push({ content: '', completed: false });
};

const removeStep = (index) => {
    localSteps.value.splice(index, 1);
};

const handleStepToggle = (index) => {
    localSteps.value[index].completed = !localSteps.value[index].completed;
};

const saveSteps = async () => {
    try {
        const loading = ElLoading.service({
            lock: true,
            text: '保存中...',
            background: 'rgba(0, 0, 0, 0.7)'
        });

        // 这里添加实际的保存API调用
        // await saveStepsAPI({ steps: localSteps.value });
        
        loading.close();
        ElMessage.success('保存成功');
        isSaved.value = true; // 标记保存成功
    } catch (error) {
        console.error('保存失败:', error);
        ElMessage.error('保存失败，请重试');
        isSaved.value = false;
    }
};

const startClass = async () => {
    try {
        await ElMessageBox.confirm('开始上课吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'info'
        });
        
        router.push('/teacher/chat');
    } catch (error) {
        if (error !== 'cancel') {
            console.error('操作失败:', error);
            ElMessage.error('操作失败，请重试');
        }
    }
};

onMounted(async () => {
    try {
        // 这里可以添加获取已保存步骤的API调用
        // const savedSteps = await getSavedSteps(courseManageId.value);
        // if (savedSteps && savedSteps.length > 0) {
        //   localSteps.value = savedSteps;
        // }
    } catch (error) {
        console.error('获取保存的步骤失败:', error);
        ElMessage.error('获取保存的步骤失败');
    }
});
</script>

<style scoped>
.timeline-container {
  padding: 20px;
  height: calc(100vh - 100px); /* 适应页面高度，减去头部等其他元素的高度 */
}

.content-wrapper {
  display: grid;
  grid-template-columns: 6fr 200px 400px;
  gap: 80px;
  height: 100%;
  max-width: 1200px;
  margin-left: 150px;
  margin-right: 40px;
}

.timeline {
  position: relative;
  height: 100%;
  width: 100px;
  padding: 20px 0;
}

.timeline-track {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: calc(100% - 40px);
  background-color: #e8e8e8;
}

.timeline-point {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.point-marker {
  width: 16px;
  height: 16px;
  background-color: #13227a;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.point-content {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: #666;
}

.steps-editor {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.editor-title {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  text-align: center;
}

.steps-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

.step-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.step-number {
  width: 24px;
  height: 24px;
  background-color: #13227a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.step-input:focus {
  border-color: #13227a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.delete-btn {
  padding: 6px 12px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.delete-btn:hover {
  background-color: #ff7875;
}

.button-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  min-width: 100px;
}

.add-btn {
  background-color: #13227a;
  color: white;
}

.save-btn {
  background-color: #13227a;
  color: white;
}

.start-btn {
  background-color: #13227a;
  color: white;
}

.action-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.action-btn:active {
  transform: scale(0.98);
}

.completed .point-marker {
  background-color: #52c41a;
}

.completed .point-content {
  color: #52c41a;
}
</style>
